import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { changeActive, getChannels } from '@/store/actions/channel'
import { RootState } from '@/types/store'

export default function Channel() {
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(getChannels())
  }, [dispatch])

  function handleClick(id: number) {
    dispatch(changeActive(id))
  }

  const { channels, active } = useSelector((state: RootState) => state.channel)
  return (
    <ul className="catagtory">
      {channels.map((item: any) => {
        return (
          <li className={item.id === active ? 'select' : ''} key={item.id} onClick={() => handleClick(item.id)}>
            {item.name}
          </li>
        )
      })}
    </ul>
  )
}
